<template>
    <div class="ys-selectcell">
        <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" v-if="!noData">
            <ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="isFinished" infinite-scroll-distance="50">
                <li v-for="(item,index) in teamList" class="page-infinite-listitem flex-layout" @click="goTeamHomePage(index)">
                    <div class="ranking" :class="{['top-three-ranking' + index]:item.isTopThree}">{{index + 1}}</div>

                    <div class="team-number flex">
                        <div class="name"><span>{{item.name}}</span></div>
                        <div class="people-number"><span>{{item.count}}人</span></div>
                    </div>

                    <span class="walking-number" :class="{'top-three':item.isTopThree}">{{item.formatStep || item.stepAvg}}</span>
                </li>
            </ul>
            <p v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </p>
        </div>
        <div class="no-data" v-if="noData">
            <div class="circle">
                <img src="../assets/img/no-select.png" alt="暂无数据">
            </div>
            <p>该时段暂无运动记录</p>
        </div>
    </div>
</template>

<script type="text/babel">
    import util from '../assets/util'
    export default {
        data() {
            return {
                loading: false,
                isFinished:false,
                wrapperHeight: 0,
                noData:false,
                teamList: [],
                dateParams:{
                    date1:'',
                    date2:''
                },
                pageInfo: {
                    page: 1,
                    size: 20
                }
            };
        },

        props:{
            teamUrl:String,
            isShow:Boolean
        },
        watch:{
            dateParams(n, o) {
                this.pageInfo.page = 1;
                this.noData = false;
                this.getInitData();

            },
            isShow(newVal,oldVal) {
                if(newVal) {
                    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
                }
            }
        },
        created(){

        },

        methods: {
            loadMore() {
                if(this.loading) return;
                this.loading = true;
                this.$http.get(this.teamUrl, {
                    params:{
                        date1:this.dateParams.date1,
                        date2:this.dateParams.date2,
                        page:this.pageInfo.page,
                        size:this.pageInfo.size
                    }
                }).then((res)=>{
                    this.loading = false;
                    this.formatTeamStep(res.data.list);

                    let resList = res.data.list;
                    let length = resList.length;

                    if(length > 0) {
                        this.teamList = this.teamList.concat(res.data.list);
                        if(length < this.pageInfo.size) {
                            this.isFinished = true;
                            this.loading = false;
                        } else {
                            this.pageInfo.page ++;
                            this.isFinished = false;
                        }
                    }

                }).catch((res) => {
                    console.log(res);
                });

            },
            getInitData() {
                this.loading = true;
                this.$http.get(this.teamUrl, {
                    params:{
                        date1:this.dateParams.date1,
                        date2:this.dateParams.date2,
                        page:this.pageInfo.page,
                        size:this.pageInfo.size
                    }
                }).then((res) => {
                    this.loading = false;

                    this.formatTeamStep(res.data.list);

                    this.teamList = res.data.list;
                    let length = this.teamList.length;

                    if(length > 0) {
                        for(let i = 0; i < 3; i++) {
                            if(this.teamList[i]) {
                                this.teamList[i].isTopThree = true;
                            }
                        }
                        if(length < this.pageInfo.size) {
                            this.isFinished = true;
                            this.loading = false;
                        } else {
                            this.isFinished = false;
                            this.pageInfo.page++;
                        }


                    } else {
                        this.noData = true;
                    }

                }).catch((res) => {
                    console.log(res);
                    this.loading = false;

                });
            },

            initEvent(){
                this.$eventBus.$on('select', (obj) => {
                    this.dateParams = obj;
                })
            },

            formatTeamStep(array){
                array.forEach(function (item) {
                    if(item.stepAvg > 9999){
                        item.formatStep = util.formatNumber(item.stepAvg);
                    }
                    if(item.upVote > 9999) {
                        item.upVote = '9999+';
                    }
                })
            },

            goTeamHomePage(i){
                let rowData = this.teamList[i];
                util.session.set('dep-row-data', rowData);
                this.$router.push({
                    path:'/teamHomePage'
                });
            }
        },
        mounted() {
            this.initEvent();
        }
    };
</script>
<style>
    .page-infinite-list {
        background: #fff;
    }
    .ys-selectcell .page-infinite-listitem{
        display:flex;
        align-items:center;
        height: 58px;
        border-bottom: solid 1px #eee;
        text-align: center;
        list-style-type: none;
    }
    .ys-selectcell .page-infinite-list li:first-child{
        border-top: solid 1px #eee;
    }
    .ys-selectcell .team-number{
        display: inline-block;
        margin-left: 20px;
        width: 96px;
    }
    .ys-selectcell .team-number .name{
        text-align: left;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ys-selectcell .team-number .people-number{
        font-size: 12px;
        color: #9E9E9E;
        text-align: left;
    }
    .ys-selectcell .ranking{
        width: 22px;
        height: 22px;
        margin-left: 10px;
        color: #262626;
        font-size: 14px;
        line-height: 22px;
        background-size: cover;
    }

    .ys-selectcell .top-three-ranking0{
        color: #FFFFFF !important;
        background-image: url("../assets/img/badge01@2x.png");
    }
    .ys-selectcell .top-three-ranking1{
        color: #FFFFFF !important;
        background-image: url("../assets/img/badge02@2x.png");
    }
    .ys-selectcell .top-three-ranking2{
        color: #FFFFFF !important;
        background-image: url("../assets/img/badge03@2x.png");
    }

    .ys-selectcell .name{
        color: #262626;

    }
    .ys-selectcell .walking-number{
        font-size: 21px;
        text-align: right;
        margin-right: 14px;
        margin-left:20px;
    }
    .ys-selectcell .top-three{
        color: #81C684;
    }
    .ys-selectcell .page-infinite-loading{
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    .ys-selectcell .page-infinite-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    .ys-selectcell .flex-layout {
        display: flex;
    }
    .ys-selectcell .flex {
        flex:1;
        width:0;
    }
</style>
